<template>
	<view class="type_view">
		<view class="all_type">
			<view>
				<text v-for="(item,index) in names" @click="selectMenu(index)" :class="{active: index === curIndex}">{{item}}</text>
			</view>
		</view>
		<view class="type_btn">
			<image src="/static/ic_split_line.png" mode=""></image>
			<image src="/static/ic_more.png" mode=""></image>
			<text>分类</text>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
	const names = ref(["首页", "手机", "电脑", "食品", "男装", "生鲜", "家具", "厨具"])
	let curIndex = ref(0);
	const selectMenu = (index) => {
		curIndex.value = index;
	}
</script>

<script>
	export default {
		name: "TypeView",
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss" scoped>
	.type_view {
		display: flex;
		font-size: 20rpx;
		margin-top: 10rpx;
		margin-bottom: 10rpx;

		&>.all_type {
			flex: 1;
			// background-color: aqua;
			height: 60rpx;
			display: flex;
			align-items: center;
			overflow: auto;
			margin-right: 20rpx;

			&>view {
				display: flex;
				align-items: center;
				flex-wrap: nowrap;

				&>text {
					flex-shrink: 0;
					margin-right: 20rpx;
					color: #F4A6A8;
				}

				&>.active {
					color: white;
				}
			}
		}

		&>.type_btn {
			// width: 150rpx;
			display: flex;
			align-items: center;
			height: 60rpx;

			&>image:first-of-type {
				height: 42rpx;
				width: 2rpx;
				margin-right: 10rpx;
			}

			&>image:last-of-type {
				height: 32rpx;
				width: 32rpx;
				margin-right: 20rpx;
			}

			&>text {
				color: white;
			}
		}

	}
</style>